$dark-color01: #79879c;
$dark-color02: #6b7b95;
$dark-color03: #5f708a;
$dark-color04: #4a5974;
$dark-color05: #404e68;
$dark-color06: #36435c;
$dark-color07: #242e42;
$dark-color08: #181d28;
$light-color01: #f9fbfd;
$light-color02: #eff4f9;
$light-color03: #e3e9ef;
$light-color04: #d8dee5;
$light-color05: #d1d7df;
$light-color06: #ccd3db;
$light-color07: #c1c9d1;
$light-color08: #abb4be;
$green-color01: #c4e6d4;
$green-color02: #a2d8bb;
$green-color03: #55bc8a;
$green-color04: #479e88;
$green-color05: #3b747a;
$blue-color01: #c7deef;
$blue-color02: #7eb8dc;
$blue-color03: #329dce;
$blue-color04: #3385b0;
$blue-color05: #326e93;
$red-color01: #fae7e5;
$red-color02: #ea8573;
$red-color03: #ca2621;
$red-color04: #ab2f29;
$red-color05: #8c3231;
$yellow-color01: #ffe1be;
$yellow-color02: #ffc781;
$yellow-color03: #f5a623;
$yellow-color04: #e0992c;
$yellow-color05: #8d663e;
$white: #ffffff;
$black: #000000;

$text-color: $dark-color06;
$secondary-text-color: $light-color06;
$heading-color: $dark-color07;
$paragraph-color: $dark-color05;
$secondary-paragraph-color: $dark-color01;

$border-color: $light-color06;
$bg-color: $light-color02;
$secondary-bg-color: $light-color01;

$success: $green-color03;
$warning: $yellow-color03;
$error: $red-color03;
$info: $blue-color03;

$primary: $green-color03;

$border-radius: 4px;

// shadow
$base-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06);
$box-shadow: 0 4px 16px 0 rgba(39, 50, 71, 0.28);

// font
$font-family: "PingFang SC", "Lantinghei SC", "Helvetica Neue", Helvetica, Arial,
  "Microsoft YaHei", 微软雅黑, STHeitiSC-Light, simsun, 宋体,
  "WenQuanYi Zen Hei", "WenQuanYi Micro Hei", sans-serif;
$font-family-id: Roboto, $font-family;
$font-family-code: "PT Mono", Monaco, Menlo, Consolas, "Courier New", monospace;

$size-small: 12px;
$size-normal: 14px;
$size-medium: 16px;
$size-large: 28px;

$body-size: $size-small;

$font-bold: 600;
$font-normal: 400;
$font-thin: 300;

// animation
$trans-speed: 0.3s;

// margin
$base-margin: 12px;

// alert
$alert-info-background: $blue-color01;
$alert-info-text-color: $blue-color04;
$alert-error-background: $red-color01;
$alert-error-text-color: $red-color05;
$alert-warning-background: $yellow-color01;
$alert-warning-text-color: $yellow-color05;
$alert-default-background: $light-color01;
$alert-default-text-color: $dark-color07;

// button
$btn-default-bg: $light-color02;
$btn-default-border: $light-color06;
$btn-default-hover-bg: $light-color03;
$btn-default-hover-border: $light-color07;
$btn-default-active-bg: $light-color08;
$btn-default-active-border: $light-color07;
$btn-default-shadow: none;
$btn-default-active-shadow: inset 0 4px 8px 0 rgba(36, 46, 66, 0.12);

$btn-primary-bg: $green-color03;
$btn-primary-text-color: $white;
$btn-primary-shadow: 0 8px 16px 0 rgba(85, 188, 138, 0.36);
$btn-primary-active-shadow: inset 0 4px 8px 0 rgba(35, 45, 65, 0.24);

$btn-control-bg: $dark-color07;
$btn-control-text-color: $white;
$btn-control-shadow: 0 8px 16px 0 rgba(35, 45, 65, 0.28);
$btn-control-active-shadow: inset 0 4px 8px 0 rgba(36, 46, 66, 0.28);

$btn-danger-bg: $red-color03;
$btn-danger-text-color: $white;
$btn-danger-shadow: 0 8px 16px 0 rgba(202, 38, 33, 0.28);
$btn-danger-active-shadow: inset 0 4px 8px 0 rgba(202, 38, 33, 0.28);

$btn-flat-hover-bg: $light-color03;
$btn-flat-active-bg: $light-color04;

// checkbox
$checkbox-size: 16px;

// collapse
$collapse-item-bg: $text-color;
$collapse-item-text: $white;
$collapse-item-active-bg: $bg-color;
$collapse-item-active-text: $text-color;
$collapse-content-bg: $white;
$collapse-content-text: $paragraph-color;

// dropdown
$dropdown-dark-bg: $dark-color07;
$dropdown-dark-text: $white;

// dropdown menu
$dropdown-menu-shadow: $btn-default-active-shadow;
$dropdown-menu-item-hover: $dark-color06;

// form
$form-item-label-color: $dark-color06;
$form-item-desc-color: $dark-color01;
$form-item-error-color: $red-color03;
$form-item-required-color: $red-color03;
$form-group-content-bg: $secondary-bg-color;

// input
$input-border-radius: 4px;
$input-default-width: 376px;
$input-bg-color: $white;
$input-border-color: $light-color08;
$input-hover-color: $dark-color01;
$input-focus-color: $green-color03;
$input-error-color: $red-color03;
$input-caret-color: $dark-color06;
$input-placeholder-color: $dark-color03;
$input-disabled-color: $light-color02;
$input-focus-shadow: 0 4px 8px 0 rgba(85,188,138,.2);

$input-search-bg: $bg-color;
$input-search-hover-bg: $white;
$input-search-hover-border: $dark-color01;

// menu
$menu-min-width: 210px;
$menu-padder: 8px;
$menu-z-index: 100;
$menu-bg: $white;
$menu-item-padder: 8px 22px;
$menu-item-color: $dark-color04;
$menu-item-hover-bg: $light-color03;
$menu-item-active-bg: $light-color03;
$menu-item-selected-bg: $light-color02;

// popper
$arrow-border-width: 16px;
$arrow-margin: 12px;
$popper-background: $white;

// tooltip
$tooltip-background: $dark-color07;
$tooltip-color: $white;
$tooltip-box-shadow: 0 6px 12px 0 rgba(2, 5, 8, 0.08),
  0 1px 2px 0 rgba(2, 5, 8, 0.08);
$tooltip-max-width: 300px;

// select
$select-box-shadow: 0 6px 12px 0 rgba(2, 5, 8, 0.04),
  0 1px 2px 0 rgba(2, 5, 8, 0.08);

// notify
$notify-width: 376px;
$notify-shadow: 0 8px 16px 0 rgba(72, 91, 127, 0.2);
$notify-default-text: $dark-color04;
$notify-default-color: $white;
$notify-error-text: $error;
$notify-error-color: $error;
$notify-warning-text: $warning;
$notify-warning-color: $warning;
$notify-success-text: $success;
$notify-success-color: $success;
$notify-info-text: $info;
$notify-info-color: $info;
